<template>
  <view class="page flex-col">
    <view class="box_2 flex-col">
      <view class="box_3 flex-row">
        <view class="image-text_1 flex-row">
          <image class="image_2" referrerpolicy="no-referrer" :src="good.imagelist && good.imagelist[0]" />
          <view class="text-group_1 flex-col">
            <view class="text_4"> {{ good.title }}</view>
            <text class="text_5">交易成功时间:{{ good.deal_time }}</text>
          </view>
        </view>
      </view>
      <uni-rate v-model="rateValue" class="image_3" />

      <text class="text_6" v-if="rateValue">{{ rateValue }}分</text>
      <view class="box_4 justify-between">
        <view class="text-wrapper_3" :class="{ acText3: inActMent(item) }" v-for="(item, index) in commntList" :key="index" @click="addValue(item)">
          {{ item }}
        </view>
      </view>

      <view class="box_6 flex-col">
        <uni-easyinput type="textarea" class="text-wrapper_9" v-model="value" placeholder="请输入内容"></uni-easyinput>
      </view>
      <view class="text-wrapper_11" @click="subForm"> 发表评价 </view>
    </view>
  </view>
</template>
<script>
import { getUser } from '../../utils/auth'
export default {
  data() {
    return {
      value: '',
      rateValue: '',
      commntList: ['卖家人很好', '交易过程愉快', '良心卖家'],
      goodId: '',
      toUser: '',
      good: {},
      actCommont: [],
      userInfo: ''
    }
  },
  onLoad(opt) {
    this.userInfo = getUser()
    this.goodId = opt.goodId
    this.$http({ url: 'getArticleDetail', method: 'GET', data: { id: this.goodId } }).then(res => {
      this.good = res.data
      let id = this.userInfo.id == this.good.user_id ? this.good.buyer : this.good.user_id
      console.log(id)
    })
  },
  methods: {
    inActMent(val) {
      let index = this.actCommont.findIndex(el => el == val)
      if (index != -1) {
        return true
      }
      return false
    },
    addValue(val) {
      let index = this.actCommont.findIndex(el => el == val)
      if (index == -1) {
        this.actCommont.push(val)
      } else {
        this.actCommont.splice(index, 1)
      }
      this.value += val + ','
    },
    subForm() {
      this.$http({
        url: 'evaluate',
        data: {
          star: this.rateValue,
          content: this.value,
          article_id: this.goodId
        }
      }).then(res => {
        let ws = uni.connectSocket({
          url: 'ws://1.13.195.104:7788',
          success: () => {
            console.log('成功')
          }
        })

        ws.onOpen(() => {
          ws.send({
            data: JSON.stringify({
              type: 'init',
              from_user: this.userInfo.id, // 发起者用户ID
              to_user: this.userInfo.id == this.good.user_id ? this.good.buyer : this.good.user_id, //接收者ID
              good_id: this.goodId
            })
          })
          ws.send({
            data: JSON.stringify({
              type: 'send',
              msg_type: 'm.text',
              data: `type=userEvaluate&content=${this.value}&star=${this.rateValue}`,
              from_user: this.userInfo.id, // 发起者用户ID
              to_user: this.userInfo.id == this.good.user_id ? this.good.buyer : this.good.user_id, //接收者ID
              good_id: this.goodId
            })
          })
        })

        if (res.code) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/user/index'
            })
          }, 500)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import '../common/common.css';

.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .box_2 {
    padding-bottom: 41px;
    .box_3 {
      background-color: rgba(248, 248, 248, 1);
      padding: 13px 28px 13px 20px;
      .image-text_1 {
        width: 95%;
        align-items: center;
        .image_2 {
          width: 55px;
          height: 55px;
          display: block;
          border-radius: 10px;
          margin-right: 20px;
        }
        .text-group_1 {
          width: 80%;
          margin: 6px 0 9px 0;
          .text_4 {
            color: rgba(51, 51, 51, 1);
            font-size: 13px;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .text_5 {
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(168, 168, 168, 1);
            font-size: 11px;

            text-align: left;
            white-space: nowrap;
            line-height: 16px;
            margin: 9px 94px 0 0;
          }
        }
      }
    }
    .image_3 {
      margin: 40px auto;
      margin-bottom: 10px;
    }
    .text_6 {
      height: 15px;
      overflow-wrap: break-word;
      color: rgba(255, 148, 0, 1);
      font-size: 15px;

      text-align: left;
      white-space: nowrap;
      line-height: 23px;
      align-self: center;
      margin-top: 20px;
    }
    .box_4 {
      align-self: center;
      margin-top: 40px;
      margin: 40px auto;
      .text-wrapper_3 {
        background-color: rgba(250, 250, 250, 1);
        border-radius: 4px;
        padding: 14px 20px 13px 20px;
        overflow-wrap: break-word;
        color: rgba(153, 153, 153, 1);
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
        line-height: 20px;
        margin-right: 10px;
      }
    }

    .box_6 {
      background-color: rgba(250, 250, 250, 1);
      border-radius: 8px;
      align-self: center;
      margin-top: 20px;
      width: 335px;
      .text-wrapper_9 {
        margin-right: 48px;
        width: 100%;
        font-size: 13px;
      }
    }
    .text-wrapper_11 {
      width: 335px;
      height: 44px;
      background: linear-gradient(331deg, #fe373c 0%, #fe7837 100%);
      box-shadow: 0px 2px 6px 0px rgba(255, 136, 139, 0.5);
      margin: 0 auto;
      border-radius: 22px;
      margin-top: 135px;
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      text-align: center;
      line-height: 44px;
    }
  }
}
</style>
